import React from 'react';
import {
  Dialog as MuiDialog,
  DialogTitle,
  DialogContent,
  DialogContentText,
  DialogActions,
  Button,
  Paper,
  Box,
  Typography,
  Link,
} from '@mui/material';
import { useAppSelector, useAppDispatch } from '../../redux/hooks';
import { closeDialog } from '../../redux/slices/generalSlice';
import { secondaryColor, bgLight } from '../../theme';
// Note: Static assets will need to be copied or configured
// import logoNetpyne from '../../static/netpyne-logo_white.png';
// import logoMetaCell from '../../static/metacell_new.png';

const AboutContent: React.FC = () => (
  <Paper
    sx={{
      backgroundColor: bgLight,
      textAlign: 'center',
      p: 2,
    }}
  >
    {/* <img width="250" src={logoNetpyne} alt="类小脑计算平台" /> */}
    <Box m={1}>
      <Link
        variant="h5"
        href="https://github.com/MetaCell/NetPyNE-UI"
        target="_blank"
        rel="noopener noreferrer"
        sx={{ display: 'block' }}
      >
        类小脑计算平台 v1.0.0
      </Link>
      <Link
        variant="h5"
        href="https://github.com/Neurosim-lab/netpyne"
        target="_blank"
        rel="noopener noreferrer"
        sx={{ display: 'block' }}
      >
        NetPyNE v1.0.6
      </Link>
      <Link
        variant="h5"
        href="https://www.neuron.yale.edu/neuron/"
        target="_blank"
        rel="noopener noreferrer"
        sx={{ display: 'block' }}
      >
        NEURON v8.2.2
      </Link>
    </Box>

    <Box m={1}>
      <Typography variant="body2" color={secondaryColor}>
        类小脑计算平台是一个基于 NetPyNE 的神经网络建模与仿真平台，
        用于开发、仿真、并行化和分析生物神经网络模型。
        查看我们的{' '}
        <Link href="https://elifesciences.org/articles/44494" target="_blank" rel="noopener noreferrer">
          eLife 论文
        </Link>
        。
      </Typography>
    </Box>

    <Box m={1} pb={2}>
      <Typography variant="body2" color={secondaryColor}>
        想了解更多？访问我们的{' '}
        <Link href="http://netpyne.org/about.html#what-is-netpyne" target="_blank" rel="noopener noreferrer">
          网站
        </Link>
        。
      </Typography>
    </Box>

    <Box m={1}>
      <Typography variant="body2" color={secondaryColor}>
        类小脑计算平台由纽约州立大学下州医学中心（
        <Link href="http://dura-bernal.org/" target="_blank" rel="noopener noreferrer">
          Dura-Bernal 实验室
        </Link>
        ）与 MetaCell 合作开发：
      </Typography>
      <Link href="http://www.metacell.us" target="_blank" rel="noopener noreferrer">
        {/* <img
          style={{
            width: 150,
            padding: '10px',
          }}
          src={logoMetaCell}
          alt="MetaCell"
        /> */}
        MetaCell
      </Link>
    </Box>
  </Paper>
);

const ContributeContent: React.FC = () => (
  <Paper
    sx={{
      backgroundColor: bgLight,
      textAlign: 'center',
      p: 2,
    }}
  >
    <Box m={1} pt={1}>
      <Typography variant="h5" color={secondaryColor}>
        想要贡献代码？
      </Typography>
    </Box>

    <Box m={1} display="flex" alignItems="center" justifyContent="center">
      <Typography variant="body2" color={secondaryColor}>
        访问我们的{' '}
      </Typography>
      <Link href="https://github.com/MetaCell/NetPyNE-UI" target="_blank" rel="noopener noreferrer">
        <Typography component="span">GitHub 仓库</Typography>
      </Link>
      。
    </Box>

    <Box m={1} pb={2}>
      <Typography variant="caption" color={secondaryColor}>
        阅读我们的{' '}
        <Link
          href="https://github.com/Neurosim-lab/netpyne/blob/development/CONTRIBUTING.md"
          target="_blank"
          rel="noopener noreferrer"
        >
          贡献指南
        </Link>
        ，了解我们的开发流程、如何提出错误修复和改进建议，
        以及如何构建和测试您对类小脑计算平台的更改。
      </Typography>
    </Box>

    <Box m={1} pb={2}>
      <Typography variant="body2" color={secondaryColor}>
        加入我们的{' '}
        <Link
          href="https://groups.google.com/forum/#!forum/netpyne-mailing"
          target="_blank"
          rel="noopener noreferrer"
        >
          邮件列表
        </Link>
        。
      </Typography>
    </Box>
  </Paper>
);

const titleContentMapping: Record<string, React.ReactNode> = {
  Contribute: <ContributeContent />,
  About: <AboutContent />,
};

const Dialog: React.FC = () => {
  const dispatch = useAppDispatch();
  const { dialogOpen, dialogTitle, dialogMessage } = useAppSelector((state) => state.general);

  const handleClose = (): void => {
    dispatch(closeDialog());
  };

  const selectMessageContent = (): React.ReactNode => {
    if (dialogTitle && dialogTitle in titleContentMapping) {
      return titleContentMapping[dialogTitle];
    }
    return <DialogContentText>{dialogMessage}</DialogContentText>;
  };

  return (
    <MuiDialog fullWidth maxWidth="sm" open={dialogOpen} onClose={handleClose}>
      <DialogTitle>{dialogTitle}</DialogTitle>
      <DialogContent>{selectMessageContent()}</DialogContent>
      <DialogActions>
        <Button onClick={handleClose} color="primary" autoFocus>
          Close
        </Button>
      </DialogActions>
    </MuiDialog>
  );
};

export default Dialog;

